<!--
 * @Author: your name
 * @Date: 2022-01-04 08:15:40
 * @LastEditTime: 2022-01-16 09:27:11
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\views\blog\components\blogList.vue
-->
<template>
  <div class="blogList-container" v-loading="isLoading" ref="blogListContainer" @scroll="blogListScroll">
    <RouterLink class="item" v-for="item in data.rows" :key="item.id" :to="{
      name:'BlogDetail',
      params:{
        id:item.id
      },
    }">
      <img class="img" :src="item.thumb" v-if="item.thumb"/>
      <div class="content">
        <h3 class="title">{{item.title}}</h3>
        <div class="description">
          <div class="date">日期：{{formatDate(item.createDate)}}</div>
          <div class="browse">浏览：{{item.scanNumber}}</div>
          <div class="comment">评论：{{item.commentNumber}}</div>
          <RouterLink :to="{
            name:'CategoryBlog',
            query:{
              page:getRouteInfo.page,
              limit:getRouteInfo.limit,
            },
            params:{
              categoryId:item.category.id
            },
          }" class="category">分类：{{item.category.id}}</RouterLink>
        </div>
        <div class="maintext">{{item.description}}</div>
      </div>
    </RouterLink>
    <!-- blogList组件数据响应后，显示该组件 -->
    <!-- 总数据、当前展示页码、每页展示多少条 该些参数从路由信息中获取 -->
    <Pager :total="data.total" :current="this.getRouteInfo.page" :limit="this.getRouteInfo.limit" :visibleNumber="10" v-if="data.total" @handlePage="disposeNewPager"/>
    <ToTop />
  </div>
</template>

<script>
import ToTop from "../../../components/toTop/index.vue" //回到顶部
import {getPagingBlog} from "@/api/blog" //请求分页博客数据
import fetchData from "@/mixins/fetchData" //组件混入
import Pager from "@/components/pager" //分页组件
import { formatDate } from "../../../utils/formatDate" //处理数据createDate（时间戳）转换成 2009-8-29 这种格式
import eventBus from "../../../utils/eventBus"
export default {
  mixins:[fetchData({})],
  methods:{
    blogListScroll(){
      eventBus.$emit("blogListScroll")
    },
    scrollTop(){
      this.$refs.blogListContainer.scrollTop = 0
    },
    async fetchData(){
      // console.log(this.getRouteInfo.page, this.getRouteInfo.limit, this.getRouteInfo.categoryId)
      // 参数page、limi、categoryId，该些参数从路由信息中获取
      return await getPagingBlog(this.getRouteInfo.page, this.getRouteInfo.limit, this.getRouteInfo.categoryId)
    },
    // 处理数据中分类名称 - "分类9"只需要最后的数字 - 但是该方法有bug如"分类10"就需要10
    handleCategoryName(categoryName){
      return categoryName[categoryName.length - 1]
    },
    formatDate,
    // 处理Pager组件点击后，展示新一页
    disposeNewPager(newPager){
      // 修改路由信息，更新page参数
      // 当前有两种路由 有无categoryId
      if(this.getRouteInfo.categoryId === -1){
        this.$router.push({
          name:"Blog",
          query:{
            page:newPager,
            limit:this.getRouteInfo.limit
          },
        })
      }else{
        this.$router.push({
          name:"CategoryBlog",
          query:{
            page:newPager,
            limit:this.getRouteInfo.limit
          },
          params:{
            categoryId:this.getRouteInfo.categoryId
          }
        })
      }
    },  
  },
  created(){
    // this.getRouteInfo
    eventBus.$on("toTop", this.scrollTop)
  },
  computed:{
    // 则获取路由信息
    getRouteInfo(){
      // 请求BlogList组件数据时，需要传递参数page、limi、categoryId，该些参数从路由信息中获取
      // console.log(this.$route.query.page, this.$route.query.limit, this.$route.params.categoryId)
      // 路由信息中可能不存在该参数，所以进行兼容性写法
      // 该些参数需要保持数字类型，所以进行隐式类型转换
      const page = +this.$route.query.page || 1; // 当前展示页码
      const limit = +this.$route.query.limit || 10; // 每页的数据量
      const categoryId = +this.$route.params.categoryId || -1; // -1代表获取所有数据
      return {
        page,
        limit,
        categoryId,
        
      }
    }
  },
  components:{
    Pager,
    ToTop,
  },
  watch:{
    // 当page组件展示新一页，路由信息回发生改变
    async $route(){
      // loading效果展示
      this.isLoading = true;
      // 不展示原来的页面
      this.data = []
      // 获取到对应路由信息的数据
      this.data = await this.fetchData();
      // 最新数据返回后，取消loading效果
      this.isLoading = false;
    }
  }
}
</script>

<style lang="less" scoped> 
.blogList-container{
    height: 100vh;
    overflow-y: auto;
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    &::-webkit-scrollbar {
      width: 13px;
      // background-color: red;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    &::-webkit-scrollbar-track {
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      background-color: transparent;
    }

    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      // -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      background-color: #eee;
    }
    /*定义最上方和最下方的按钮*/
    &::-webkit-scrollbar-button {
      // border-radius: 10px;
      // height: 0px;
      // background-color: transparent;
    }
  .item{
    display:flex;
    padding:5px;
    // width:100%;
    // box-sizing:border-box;
    border-radius:7px;
    margin:10px;
    &:hover{
      border:1px solid black;
      box-shadow:1px 1px 3px #000;
      transform:scaleY(1.1);
      cursor:pointer;
    }
    img{
      width:20%;
      border-radius:7px;
      margin-right:5px;
    }
    .content{
      .description{
        display:flex;
        font-size:12px;
        color:#999;
        margin-bottom:20px;
        &>*{
          white-space:nowrap;
          margin-right:7px;
        }
      }
      .maintext{
        font-size:14px;
      }
    }
  }
}
</style>